import { StyleSheet, Text, View, TextInput } from 'react-native'
import React, { useRef, useEffect, useState } from 'react'

const TextInputDemo = () => {
  const inputRef = useRef(null);
  const [text, setText] = useState('');
  useEffect(() => {
    setTimeout(() => {
      inputRef.current.blur();
    }, 2000);
  }, []);

  return (
    <View style={styles.root}>
      <TextInput
        ref={inputRef}
        style={styles.input}
        autoFocus={true}
        value={text}
        onChangeText={setText}
        placeholder='输入内容'
      />

      <TextInput
        ref={inputRef}
        style={styles.input}
        // autoFocus={true}
        caretHidden={false} // 隐藏光标
        keyboardType='number-pad'
      />

    </View>
  )
}

export default TextInputDemo

const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: '100%',
    backgroundColor: '#F0F0F0',
  },
  input: {
    width: '100%',
    height: 56,
    backgroundColor: '#D0D0D0',
    fontSize: 24,
    color: '#333333',
    fontWeight: 'bold',
    borderColor: 'red',
    borderWidth: 1,
  }

});